<template>
    <Echarts class="echarts" :options="options" />
</template>

<script>
import Echarts from "../../../../component/ECharts";
export default {
    components: {
        Echarts,
    },
    props: {
        reciveData: {
            type: Object,
        },
    },
    computed: {
        options() {
            return {
                grid: {
                    top: "15%",
                    left: "5%",
                    right: "5%",
                    bottom: "15%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.reciveData.xAxis,
                    axisLine: {
                        lineStyle: {
                            color: "#ffffff",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ["#6E6E6E"],
                            width: 1,
                            type: "solid",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#ffffff",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ["#6E6E6E"],
                            width: 1,
                            type: "solid",
                        },
                    },
                },
                series: [
                    {
                        data: this.reciveData.yAxis,
                        type: "line",
                        areaStyle: {},
                        lineStyle: {
                            color: "#00B5F7",
                        },
                        symbolSize: 6,
                        itemStyle: {
                            // normal: {
                            borderRadius: 20,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: " rgb(29, 62, 114, 0.4)",
                                    },
                                    {
                                        offset: 1,
                                        color: "#3ECCFF",
                                    },
                                ],
                            },
                            // },
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>
